<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<script type="text/javascript">
     
     function addCategory(){
        if(window.ActiveXObject){
           xmlhttp=new ActiveXObject("Microsoft.XMLHttp");
        }else if(window.XMLHttpRequest){
           xmlhttp=new XMLHttpRequest();  
        } 
        var cateName= document.getElementById("category-name").value;
        var cateDescription = document.getElementById("category-description").value;
        var url = "../service/addCategory?name="+cateName+"&summary="+cateDescription;
        xmlhttp.open("POST", url, false);
        xmlhttp.onreadystatechange = onCategoryAdded;
        xmlhttp.send();
     }
     function onCategoryAdded(){
      if(xmlhttp.readyState == 4 ){
       alert(xmlhttp.responseText);
       var option = xmlhttp.responseXML.getElementsByTagName("category");
            alert(option.length);
            for(var i=0;i<option.length;i++){
            var value =option.item(i).childNodes.item(0).text ;
            var name=option.item(i).childNodes.item(1).text ;
            var option =  new Option(name,value);
            option.selected=true;
            var result=document.getElementById("addMyProduct_product_cid").options.add(option);
            hideAddCategoryInput();
            }   
       }
     }
     function showUploadInput(){
         $("#uploadform").show();
         hideAddCategoryInput();
         hideAddSeriesForm();
     }
     function showAddCategoryInput(){
         $("#categoryform").show();
         hideUploadInput();
         hideAddSeriesForm();
     }
     function hideAddCategoryInput(){
         $("#categoryform").hide();
     }
     function hideUploadInput(){
         $("#uploadform").hide();
     }
     function showAddSeriesForm(){
         $("#seriesform").show();
         hideAddCategoryInput();
         hideUploadInput();
     }
     function hideAddSeriesForm(){
         $("#seriesform").hide();
     }
     function querySeries(){
         var cid=document.getElementById("addMyProduct_product_cid").value;
         alert(cid);
         var url = "../servlet/getSeries?categoryId="+cid;
         xmlhttp.open("POST", url, false);
         xmlhttp.onreadystatechange = onSeriesQueryFinish;
         xmlhttp.send();
     }
     function onSeriesQueryFinish(){
         if(xmlhttp.readyState == 4 ){
         alert("ok"+xmlhttp.responseText);
         var series = xmlhttp.responseXML.getElementsByTagName("serial");
            
            document.getElementById("addMyProduct_product_sid");
            var options = document.getElementById("addMyProduct_product_sid").options;
            for(var i=options.length;i>=0;i--){
              alert("delete "+i);
              options.remove(i);
            }
            
            for(var i=0;i<series.length;i++){
                var value =series.item(i).childNodes.item(0).text ;
                var name=series.item(i).childNodes.item(1).text ;
                var opt =  new Option(name+i,value);
                var result=document.getElementById("addMyProduct_product_sid").options.add(opt);
            }   
         }
     }
     
     function addSerial(){
         var serialName = document.getElementById("serial_name").value;
         var cid=document.getElementById("addMyProduct_product_cid").value;
         alert(serialName+":"+cid);
         var url = "../service/addSerial?name="+serialName+"&cid="+cid;
        xmlhttp.open("POST", url, false);
        xmlhttp.onreadystatechange = onSerialAdded;
        xmlhttp.send();
     }
     function onSerialAdded(){
       if(xmlhttp.readyState == 4 ){
          alert(xmlhttp.responseText);
          var option = xmlhttp.responseXML.getElementsByTagName("serial");
            alert(option.length);
            for(var i=0;i<option.length;i++){
            var value =option.item(i).childNodes.item(0).text ;
            var name=option.item(i).childNodes.item(1).text ;
            var option =  new Option(name,value);
            option.selected=true;
            var result=document.getElementById("addMyProduct_product_sid").options.add(option);
            hideAddSeriesForm();
            }   
       }
    }
</script>
<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
<style>
   .category{
     width:400px;
     height:200px;
     margin:0 auto;
     background: #666778;
     postion:z-index:3;
   }
   .upload{
     width:400px;
     height:400px;
     margin:0 auto;
     background: #666778;
   }
</style>
<div>
<div><button onclick="showUploadInput()">选择图片</button></div>
   <s:form action="/shop/addMyProduct.action"  method="post" enctype="multipart/form-data">
          <div>商品名称:<s:textfield name="product.name" length="15"></s:textfield></div>   
          <div><s:hidden id ="icon" name="product.icon"  length="45"></s:hidden></div> 
          <div>商品大类:<s:select name="product.cid" list="categories" listKey="key" listValue="value" onchange="querySeries()"></s:select> <span onclick="showAddCategoryInput()">增加大类</span></div>
          <div>商品小类:<s:select name="product.sid" list="series" listKey="key" listValue="value"></s:select> <span onclick="showAddSeriesForm()"> 增加小类</span></div>
          <DIV>价 ---格:<s:textfield name="product.price"  length="15"></s:textfield></DIV>
          <DIV>描 ---述:<s:textarea name="product.description"></s:textarea></DIV>
          <s:submit value="确定"> </s:submit>
   </s:form>
 </div>
   
  <div id ="categoryform" class="category" style="display: none">
			<div >
				<label for="category-name">
					名称
				</label>
				<input id="category-name" type="text" value=""
					name="newCategoryName">
				<s:fielderror><s:param>newCategoryName</s:param></s:fielderror>
			</div>
			<span>这将是它在站点上显示的名字。</span>
			<div >
				<label for="category-description">
					描述
				</label>
				<textarea id="category-description" cols="40" rows="5"
					name="newCategoryDescription"></textarea>
			</div>
			<div>“描述”不一定会被显示，但有的主题会显示它。</div>
			<div >
				<input type="button" value="提交" onClick="addCategory()" /><input type="button" value="关闭" onclick ="hideAddCategoryInput()" />
			</div>
	</div>
   <div id="seriesform" style="display:none;" class="category" >
              小类名字 <input type="text" id="serial_name" >
        <input type="button" value="提交" onClick="addSerial()"></input>
   </div>
   <div id="uploadform" style="display:none;" class="upload"><jsp:include page="/struct2/img_test_input.jsp"></jsp:include></div>
